{layout name="layout" /}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    <a href="{:url('admin/index/index')}"> 首页</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('admin/admin_user/index')}">管理员列表</a>
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
        title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div class="Hui-article" style="min-width: 1000px;">
    <article class="cl pd-20">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
                    <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
                <a href="{:url('addOrEdit')}" class="btn btn-primary radius">
                    <i class="Hui-iconfont">&#xe600;</i> 添加管理员</a>
            </span>
        </div>
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th width="25">
                        <input type="checkbox" name="allcheck" value="">
                    </th>
                    <th width="40">ID</th>
                    <th width="150">登录名</th>
                    <th width="120">组别</th>
                    <th width="120">笔名</th>
                    <th width="180">邮箱</th>
                    <th width="80">状态</th>
                    <th width="180">添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $data as $val}
                <tr class="text-c">
                    <td>
                        <input type="checkbox" value="{$val.id}" name="checkbox[]">
                    </td>
                    <td>{$val.id}</td>
                    <td>{$val.username}</td>
                    <td>{$data_role[$val.role_id]}</td>
                    <td>{$val.pen_name}</td>
                    <td>{$val.email}</td>
                    <td>{eq name="val.status" value="1"}
                        <a href="javascript:void(0);" title="停用" onClick="changeStatus(this,'{$val.id}')" data-status="{$val.status}">
                            <span class="label label-success radius">正常</span>
                        </a>
                        {else/}
                        <a href="javascript:void(0);" title="启用" onClick="changeStatus(this,'{$val.id}')" data-status="{$val.status}">
                            <span class="label label-default radius">停用</span>
                        </a>{/eq}</td>
                    <td>{$val.create_time}</td>
                    <td class="td-manage">
                        <a title="编辑" href="{:url('addOrEdit','id='.$val.id)}" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$val.id}')" class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </article>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    /**
	 * 改变状态值 status 1, 正常; 2, 停用
	 */
	function changeStatus(obj, id) {
		var status = $(obj).data('status');
		var change_status = 2 - status + 1;
		$(obj).data('status', change_status);
		$.post('status', {
                'id': id,
				'status': change_status
            }, function (data) {
				// console.log(data);
                if (data.code == 1) {
                    if (change_status == 1) {
						$(obj).attr('title', '停用');
						$(obj).html('<span class="label label-success radius">正常</span>');
					} else {
						$(obj).attr('title', '启用');
						$(obj).html('<span class="label label-default radius">停用</span>');
					}
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
        }, 'json');
	}

    /*
     * 列表删除条目
     */
    function del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('delete', {
                'id': id
            }, function (data) {
                if (data.code == 1) {
                    $(obj).parents("tr").remove();
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
            }, 'json');
        });
    }

    /*
     * 批量删除条目
     */
    function del_all() {
        var checkbox = $('.text-c input[name="checkbox[]"]');
        var ids = new Array();
        checkbox.each(function (x) {
            if (this.checked)
                ids.push(this.value);
        })
        // console.log(ids);
      
        layer.confirm('确认要删除吗？', function (index) {
            $.post('delete', {
                'id': ids
            }, function (data) {
                if (data.code == 1) {
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                    checkbox.each(function (x) {
                        if (this.checked)
                            $(this).parents("tr").remove();
                    })
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 1000
                    });
                }
            }, 'json')
        });
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->